<template>
    <div>
        <van-popup v-model:show="show" position="bottom" round closeable >
            <div class="pop">
                <div class="content">
                    <div class="all " :class="{'active': id === 'all'}" @click="selectType({id:'all'})">全部类型</div>
                    <div class="list">
                        <div class="title">支出</div>
                        <div class="exponse-wrap item">
                            <p v-for="item in expense" :key="item.id" :class="{'active': id === item.id}" @click="selectType(item)">{{item.name}}</p>
                           
                        </div>
                    </div>
                    <div class="list">
                        <div class="title">收入</div>
                        <div class="income-wrap item">
                            <p v-for="item in income" :key="item.id" :class="{'active': id === item.id}" @click="selectType(item)">{{item.name}}</p>
                           
                        </div>
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { ref ,onMounted} from 'vue';
import axios from '@/api/index.js';
const show = ref(false);
const expense = ref([]);
const income = ref([]);
const id = ref('all');
const emit = defineEmits(['handleType']);  // 定义一个事件
onMounted(async() => {
    //获取所有的类型
    const res = await axios.get('/api/type/list')
    expense.value = res.data.list.filter(item => item.type === '1')
    income.value = res.data.list.filter(item => item.type === '2') 
    // console.log(expense.value, income.value);
    
})
const selectType = (item) =>{
    id.value = item.id;
    show.value = false;
    emit('handleType', item)
}

//获取所有的类型
defineExpose({
    show
    
})
</script>

<style lang="less" scoped>
.pop{
    background-color: #f5f5ff;
    max-height: 70vh;
    .content{
       padding: 20px; 
       font-size: 16px;
       .all{
        display: inline-block;
        padding: 14px 20px;
        background-color: #fff;
       }
       .list{
         margin-top: 10px; 
         .title{
            font-size: 14px;
            color: #999;
            margin: 10px 0;


         }
         .item{
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            p{
                text-align: center;
                padding: 14px 0;
                background-color: #fff;
            }
         }
       }
    }
}
.active{
   background-color: rgb(54, 168, 98) !important; 
}
</style>